<template>
  <div class="main-layout-container">
    <div class="aside">
      <div>
        <div>
          <userAvatar />
        </div>
        <userInfo :user="state.user" />
      </div>
      <resetPwd />
    </div>
    <div class="main-section">
      <login></login>
    </div>
  </div>

</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
import login from "./login.vue"

const activeTab = ref("userinfo");
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
});

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
};

getUser();
</script>
<style scoped lang="scss">
.main-layout-container {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  .aside {
    width: 250px;
    padding: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
  }
  .main-section {
    margin-left: 250px;
    height: 100%;

  }
}
</style>
